<!DOCTYPE html>
<html>
<head>
    <title>金位车位</title>
    <link rel='stylesheet' href='./design/css/style.css'/>
    <link rel='stylesheet' href='./design/css/resize.css'/>
    <meta charset="UTF-8"/>
</head>
<body>

<div id="app" :style="{height:layout.height+'px'}">
    <div class="left">
		 <div class="pro-box toolbars">
		     <div class="title">工具栏</div>
		 	<!-- 1通道,2电梯/楼梯口,3车位,4出口,5入口 -->
		     <span class="item">
		         <a href="javascript:;" @click="addShape(1,30,30)" class="btn"><span>新建通道</span></a>
		     </span>
		 	<span class="item">
		 	    <a href="javascript:;" @click="addShape(2,30,30)" class="btn"><span>新建电梯/楼梯口</span></a>
		 	</span>
		     <span class="item">
		         <a href="javascript:;" @click="addShape(4,30,30)" class="btn"><span>新建出口</span></a>
		     </span>
		 	<span class="item">
		 	    <a href="javascript:;" @click="addShape(5,30,30)" class="btn"><span>新建入口</span></a>
		 	</span>
		 </div>
		 
        <div class="pro-box">
            <div class="item">
                <div class="key">宽度：</div>	
                <div class="value">
                    <input type="input" v-model="card.width" placeholder="宽度" ref="groundw" v-on:change="finishInputGroundW()"/>
                </div>
            </div>
            <div class="item">
                <div class="key">高度：</div>
                <div class="value">
                    <input type="input" v-model="card.height" placeholder="宽度" ref="groundh" v-on:change="finishInputGroundH()"/>
                </div>
            </div>
			<div class="item">
				<div class="settingBtn" onclick="javascript:$('input[name=\'file\']').click();">导入平面图</div>
				<input name="fileName" readonly style="width: 100px;"/>
				<input type="file" name="file" style="display: none;"  @change="upLoadImg($event)" />
			</div>
        </div>
      
        <div class="pro-box-list">
            <div class="title">车位信息</div>
			<div class="item">
				<div class="key">编号：</div>
				<div class="value">
				    <input style="width: 120px;" type="input" v-model="inputCarNoL" ref="carnameL" placeholder="查询编号" v-on:focus="inputCarNofocusL()" />
				</div>
			</div>
			
            <div id="idLScroll" class="node-list">
                <div v-if="cardata.length==0" class="empty">没有任何车位信息</div>
                <div v-for="item in cardata" :class="{node:true,active:item.active}" @click="selectCarShape($event,item)"  @contextmenu.prevent="addShape(3)" >
					<div class="text">
						<!-- 双击添加车位 -->
					    <span v-if="item.add&&item.show" style="color:#999999;">车位{{item.name}}:长{{item.height}}米,宽{{item.width}}米,已加</span>
						<span v-else style="color:#333333;">车位{{item.name}}:长{{item.height}}米,宽{{item.width}}米</span>
					</div>
				</div>
				
            </div>
        </div>
		<div class="filterAreaL" v-if="filterInputCarNosL.length>0">
			<span v-for="item in filterInputCarNosL" class="item" @click="searchCarNoClickL($event,item)">{{item.name}}</span>
		</div>
    </div>
	
    <div id="idCScroll" class="center" 
	  @mousemove='updateXY'>
        <div :style="{'background':layout.background,width:card.width+'px',height:card.height+'px',backgroundRepeat: 'no-repeat',backgroundSize: 'cover',transform:'scale('+layout.scale+')',webkitTransform:'scale('+layout.scale+')',msTransform:'scale('+layout.scale+')',mozTransform:'scale('+layout.scale+')',oTransform:'scale('+layout.scale+')'}"  
			@contextmenu.prevent.stop="showCardMenu($event)" tabindex="0" class="card" 
             @click="cardClick($event)" @keydown="shapeMove($event)" @keyup="cardKeyup($event)" @mousedown="centerMousedown($event)">
            <!-- 各种元素 -->
			<shape v-for="(item,index) in shapes" :data-id="item.id" :shape="item" :key="index" v-if="item.show"
					@contextmenu.prevent.stop.native="showContextmenu($event,item)"
					@click.prevent.stop.native="selectShape($event,item)" 
					v-drag="{shape:item}">
			</shape>
        </div>
		<div class="mousePosi">X：{{mouseX}}，Y：{{mouseY}}，{{layout.scale}}</div>
		<div class="centerFloat">
			<div @click="clickEnlarge()">+</div>
			<div @click="clickNarrow()">-</div>
			<div @click="onSaveMapData()">保存</div>
			<div @click="onPublishMapData()">发布</div>
			<div @click="clickPreview()">预览</div>
		</div>
    </div>
	
    <div class="right">
        <div :class="{disable:!isSelected}">
            <div class="pro-box">
                <div class="title">微调功能区</div>
				<div class="item">
				    <div class="key">类型：</div><!-- 1通道,2电梯/楼梯口,3车位,4出口,5入口 -->
				    <div class="value" v-if="selected.type==1">通道</div>
					<div class="value" v-if="selected.type==2">电梯/楼梯口</div>
					<div class="value" v-if="selected.type==3">车位</div>
					<div class="value" v-if="selected.type==4">出口</div>
					<div class="value" v-if="selected.type==5">入口</div>
				</div>
				<div class="item" v-if="selected.type==2">
					<div class="key">楼号单元号：</div>
					<div v-if="houseData.length>0">
						<select v-model="selHouse" ref="selHouse" v-on:change="changeSelHouse()">
							<option v-for="item in houseData" :value="item.id">{{item.name}}</option>
						</select>
						<select v-model="selHouseUnit" ref="selHouseUnit" v-on:change="changeSelHouseUnit()">
							<option v-for="item in houseData[selHouseIndex].units" :value="item.id">{{item.name}}</option>
						</select>
					</div>
				</div>
				<div class="item">
				    <div class="key">编号：</div>
				    <div class="value">
				        {{selected.sname}}
				    </div>
				</div>
				<div class="item">
				    <div class="key">X坐标：</div>
				    <div class="value">
				        <input type="number" v-model="selected.left" placeholder="X坐标"/>px
				    </div>
				</div>
				<div class="item">
				    <div class="key">Y坐标：</div>
				    <div class="value">
				        <input type="number" v-model="selected.top" placeholder="Y坐标"/>px
				    </div>
				</div>
				<div class="item">
				    <div class="key">宽度：</div>
				    <div class="value">
				        <input type="number" v-model="selected.width" placeholder="宽度"/>px
				    </div>
				</div>
				<div class="item">
				    <div class="key">高度：</div>
				    <div class="value">
				        <input type="number" v-model="selected.height" placeholder="高度"/>px
				    </div>
				</div>
				<div class="item">
					<div class="key">角度：</div>
					<div class="value">
						<input type="number" v-model="selected.deg" placeholder="旋转角度"  @blur="changeDeg($event)"/>
					</div>
				</div>
            </div>
            <div class="pro-box-list">
                <div class="title">已创建数据</div>
				
				<div class="item">
					<div class="key">编号：</div>
					<div class="value">
					    <input style="width: 120px;" type="input" v-model="inputCarNoR" ref="carnameR" placeholder="查询编号" v-on:focus="inputCarNofocusR()" />
					</div>
				</div>
				
                <div id="idRScroll" class="node-list" >	
                    <div v-if="shapes.length==0" class="empty">没有任何元素</div>
                    <div v-for="item in shapes" :class="{node:true,active:item.active}" @click="selectShape($event,item)"  v-if="item.show">
            			<!-- 1通道,2电梯/楼梯口,3车位,4出口,5入口 -->
                        <div v-if="item.type==1" class="text">
                            <span>通道{{item.name}}：x={{item.left}},y={{item.top}},w={{item.width}},h={{item.height}}</span>
                        </div>
            			<div v-if="item.type==2" class="text">
            			    <span>电梯/楼梯口{{item.name}}：x={{item.left}},y={{item.top}},w={{item.width}},h={{item.height}}</span>
            			</div>
            			<div v-if="item.type==3" class="text">
            			    <span>{{item.name}}：x={{item.left}},y={{item.top}},w={{item.width}},h={{item.height}}</span>
            			</div>
            			<div v-if="item.type==4" class="text">
            			    <span>出口{{item.name}}：x={{item.left}},y={{item.top}},w={{item.width}},h={{item.height}}</span>
            			</div>
            			<div v-if="item.type==5" class="text">
            			    <span>入口{{item.name}}：x={{item.left}},y={{item.top}},w={{item.width}},h={{item.height}}</span>
            			</div>
            			<div v-if="item.type==-1" class="text">
            			    <span>文本{{item.name}}：x={{item.left}},y={{item.top}},w={{item.width}},h={{item.height}}</span>
            			</div>
                    </div>
                </div>
            </div>
        </div>
		<div class="filterAreaR" v-if="filterInputCarNosR.length>0">
			<span v-for="item in filterInputCarNosR" class="item" @click="searchCarNoClickR($event,item)">{{item.name}}</span>
		</div>
    </div>

    <div v-if="popup.show" :style="{top:popup.top+'px',left:popup.left+'px'}" class="popup-menu">
        <div v-for="item in popup.menus" v-if="item.show">
            <div v-if="item.split" class="split"></div>
            <div v-else class="item" @click="item.handler()"><span :class="'fa '+item.icon"></span>{{item.text}}</div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="./design/js/index.js"></script>
</html>
